@import 'hover';

.lil-gui {
	.title {

		height: var(--title-height);
		line-height: calc(var(--title-height) - 4px);

		font-weight: 600;
		padding: 0 var(--padding);
		-webkit-tap-highlight-color: transparent;
		cursor: pointer;
		outline: none;

		// we use an underline to indicate focus, don't underline arrow
		text-decoration-skip: objects;

		&:before {
			font-family: 'lil-gui';
			content: '▾';
			padding-right: 2px;
			display: inline-block; // so skip: objects works
		}

		&:active {
			background: var(--title-background-color);
			opacity: 0.75;
		}

		@include can-hover {
			body:not(.lil-gui-dragging) &:hover {
				background: var(--title-background-color);
				opacity: 0.85;
			}
			&:focus {
				text-decoration: underline var(--focus-color);
			}
		}
	}
	.lilHorizontalTitle {
		height: var(--title-height);
		line-height: calc(var(--title-height) - 4px);

		font-weight: 600;
		padding: 0 var(--padding);
		-webkit-tap-highlight-color: transparent;
		cursor: pointer;
		outline: none;
		user-select: none;

		// we use an underline to indicate focus, don't underline arrow
		text-decoration-skip: objects;

		&:before {
			font-family: 'lil-gui';
			padding-right: 2px;
			display: inline-block; // so skip: objects works
		}

		&:active {
			opacity: 0.75;
		}
	}

	.horizontalSelected{
		background-color: var(--title-horizontal-selected-background-color);
		color: var(--title-horizontal-selected-text-color);
		border-top-left-radius: var(--title-horizontal-selected-radius);
		border-top-right-radius: var(--title-horizontal-selected-radius);
	}

	.childrenTitle{
		display: flex;
		border-bottom: var(--title-horizontal-border-bottom);
	}

	&.root > .title:focus {
		text-decoration: none !important;
	}

	&.closed {
		> .title:before {
			content: '▸';
		}
		> .children {
			transform: translateY(-7px);
			opacity: 0;
		}
		&:not(.transition) > .children {
			display: none;
		}
	}

	&.transition > .children {
		transition-duration: 300ms;
		transition-property: height, opacity, transform;
		transition-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
		overflow: hidden;
		pointer-events: none;
	}

	// Empty children
	// -------------------------------------------------------------------------

	.children:empty:before {
		content: 'Empty';
		padding: 0 var(--padding);
		margin: var(--spacing) 0;
		display: block;
		height: var(--widget-height);
		font-style: italic;
		line-height: var(--widget-height);
		opacity: 0.5;
	}

	// Root Level Folders
	// -------------------------------------------------------------------------

	&.root > .children > & > .title {
		border: 0 solid var(--widget-color);
		border-width: 1px 0;
		transition: border-color 300ms;
	}

	&.root > .children > &.closed > .title {
		border-bottom-color: transparent;
	}

	// Seperate folders from controllers at the same level
	& + .controller {
		border-top: 1px solid var(--widget-color);
		margin-top: 0;
		padding-top: var(--spacing);
	}

	// Nested folders
	// -------------------------------------------------------------------------

	& & & {
		> .title {
			border: none;
		}
		> .children {
			border: none;
			margin-left: var(--folder-indent);
			border-left: 2px solid var(--widget-color);
		}
	}

	// Don't draw folder + controller seperation rule for when double nested
	& & .controller {
		border: none;
	}

	.elem-field{
		padding: 0;
		border: var(--fieldset-border) ;
		margin: 0 5px;
		border-radius: var(--fieldset-border-radius);
		margin-bottom: var(--spacing);
	}

	.field-legend{
		margin-left: 10px;
	}

	.field-legend-label{
		padding: 0 10px;
		font-size: var(--font-size);
	}

	.field-box{
		padding: 5px;
	}
}
